<template>
  <div class="list">
    <el-card>
      <div>
        <!-- 开头 -->
        <el-form>
          <span class="name">学科名称</span>
          <el-input
            v-model="queryInfo.subjectName"
            clearable
            size="small"
            class="subject-name"
          >
          </el-input>

          <el-button size="small" @click="queryInfo.subjectName = ''"
            >清除</el-button
          >
          <el-button type="primary" size="small" @click="showSubject"
            >搜索</el-button
          >
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="dialogFormVisible = true"
            >新增学科</el-button
          >
        </el-form>
      </div>
      <!-- 警告框 -->
      <el-alert type="info" title="1111 " :closable="false" show-icon>
        <template slot="title"> 数据一共有 {{ this.total }} 条 </template>
      </el-alert>
      <!-- 表格 -->
      <template>
        <el-table style="width: 100%" stripe :data="subjectList">
          <el-table-column type="index" label="序号" width="60px">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template v-slot="scope">
              {{ scope.row.addDate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示">
            <template v-slot="scope">
              {{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录">
          </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="totals" label="题目数量"> </el-table-column>
          <el-table-column prop="" label="操作" width="250px">
            <template v-slot="scope">
              <el-link :underline="false" type="primary" @click="abc(scope.row)"
                >学科分类</el-link
              >
              <el-link :underline="false" type="info" @click="label(scope.row)"
                >学科标签</el-link
              >
              <el-link
                :underline="false"
                type="warning"
                @click="changeSubject(scope.row.id)"
                >修改</el-link
              >
              <el-link
                :underline="false"
                type="danger"
                @click="deleteSubjects(scope.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[5, 10, 30, 40]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 新增学科的弹框 -->
      <el-dialog title="新增学科" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学科名称" prop="subjectName">
            <el-input
              v-model="ruleForm.subjectName"
              size="mini"
              placeholder="请输入学科名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否显示" prop="isFrontDisplay">
            <el-switch v-model="ruleForm.isFrontDisplay"></el-switch>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSubject">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改学科的弹框 -->
      <el-dialog title="修改学科" :visible.sync="changeFormVisible">
        <el-form :model="userForm" :rules="rules" label-width="100px">
          <el-form-item label="学科名称">
            <el-input size="mini" v-model="userForm.subjectName"></el-input>
          </el-form-item>
          <el-tooltip :content="'Switch value: ' + value" placement="top">
            <el-switch
              inactive-text="是否显示"
              v-model="userForm.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-tooltip>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="changeFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="trueChangeSubject">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 成功的提示框 -->
      <template>
        <el-button :plain="true" @click="success" showClose="false"
          >成功</el-button
        >
        <el-button :plain="true" @click="error" showClose="false"
          >错误</el-button
        >
      </template>
    </el-card>
  </div>
</template>

<script>
// 导入获取数据
import {
  getSubject,
  addSubjects,
  changeSubjects,
  subjectDetails,
  deleteSubject
} from '../../api/subject/subject'
// 导入自己的css
import '../../style/list.css'
export default {
  name: 'subject',
  components: {},
  props: {},
  data() {
    return {
      value: null,
      // 存放页数
      queryInfo: {
        // 当前的页数
        page: 1,
        // 条数
        pagesize: 10,
        subjectName: ''
      },
      // 存放数据
      subjectList: [],
      total: 0,
      // 增加弹框的显示与隐藏
      dialogFormVisible: false,
      // 修改弹框的显示隐藏
      changeFormVisible: false,
      // 添加的数据
      ruleForm: {
        subjectName: '',
        isFrontDisplay: 0
      },
      // 规则
      rules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, message: '长度在 3 个字符', trigger: 'blur' }
        ]
      },
      // 保存用户的信息
      userForm: {
        subjectName: '',
        id: ''
      }
    }
  },

  computed: {},
  watch: {},
  created() {
    this.showSubject()
  },
  mounted() {},
  methods: {
    // 获取数据
    async showSubject() {
      try {
        const { data } = await getSubject(this.queryInfo)
        this.subjectList = data.data
        this.subjectList = data.items
        this.total = data.counts
      } catch (err) {
        console.table(err)
        this.$message('获取数据失败')
      }
    },
    // 监听pagesize的变化
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize
      this.showSubject()
    },
    // 监听页码的变化
    handleCurrentChange(newpage) {
      this.queryInfo.page = newpage
      this.showSubject()
    },
    // 新增学科
    async addSubject() {
      try {
        await addSubjects(this.ruleForm)
        this.showSubject()
        this.success()
      } catch (err) {
        this.error()
      }
      this.dialogFormVisible = false
    },
    // 调用成功的消息提示
    success() {
      this.$message({
        message: '成功',
        type: 'success'
      })
    },
    // 调用失败的消息提示
    error() {
      this.$message.error('失败！')
    },
    // 修改学科
    async changeSubject(id) {
      // this.userForm.id = id
      try {
        const { data } = await subjectDetails(id)
        this.userForm = data
        // console.log(this.userForm)
        if (this.userForm.isFrontDisplay === 1) {
          this.userForm.isFrontDisplay = true
        } else {
          this.userForm.isFrontDisplay = false
        }
        // console.log(this.userForm.isFrontDisplay)
      } catch (err) {
        this.error()
      }
      this.changeFormVisible = true
    },
    // 确定修改按钮
    async trueChangeSubject() {
      try {
        console.log(this.userForm)
        const { data } = await changeSubjects(this.userForm)
        this.changeFormVisible = false
        this.userForm.subjectName = data.subjectName
        this.showSubject()
        this.success()
      } catch (err) {
        this.showSubject()
        this.error()
      }
    },
    // 删除按钮
    async deleteSubjects(id) {
      const confirm = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirm !== 'confirm') {
        return this.$message.info('已取消了删除')
      }
      try {
        await deleteSubject(id)
        this.showSubject()
      } catch (err) {
        this.error()
      }
    },
    // sfnsak
    abc(val) {
      console.log(val)
      this.$router.push(`/directorys?id=${val.id}&name=${val.subjectName}`)
    },
    label(val) {
      this.$router.push(`/tags?id=${val.id}&name=${val.subjectName}`)
    }
  }
}
</script>

<style scoped lang="less">
.list {
  span {
    font-size: 14px;
    font-weight: 700;
    color: #606266;
    text-align: right;
  }
  .subject-name {
    margin: 0 10px;
    width: 25%;
  }
}
.el-button--success {
  float: right;
}
.el-alert--info {
  margin-top: 10px;
}
.el-table {
  margin-top: 10px;
}
.block {
  text-align: center;
  margin-top: 20px;
}
.cell {
  width: 250px;
}
.el-link {
  padding: 0 5px;
}
</style>
